<script setup lang='ts'>
import NavBar from '../../components/NavBar.vue'
</script>

<template>
  <NavBar class="nav">
    <template v-slot:body>
      <view class="search">
        <view class="input" style="width: 436rpx">
          <image mode="widthFix" class="icon" src="/static/image/navbar/search.png"/>
          <input placeholder="请选择需要查询的日期" />
        </view>
      </view>
    </template>
  </NavBar>
  <view class="outer nav-padding">
    <view class="list">
      <view class="card">
        <view class="header">
          <view class="name">机器编号：101191</view>
        </view>
        <view class="body">
          <view class="item">运营商：<b>张小红</b></view>
          <view class="item">网络：：<image mode="widthFix" class="signal" src="/static/image/icon_network3.png"/> </view>
          <view class="item">到期时间：<b>2026-06-18</b></view>
          <view class="item">运营状态：<b>运营</b></view>
          <view class="check">
            <image class="icon" mode="widthFix" src="/static/image/user/check.png"/>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="header">
          <view class="name">机器编号：101191</view>
        </view>
        <view class="body">
          <view class="item">运营商：<b>张小红</b></view>
          <view class="item">网络：：<image mode="widthFix" class="signal" src="/static/image/icon_network3.png"/> </view>
          <view class="item">到期时间：<b>2026-06-18</b></view>
          <view class="item">运营状态：<b>运营</b></view>
          <view class="check">
            <image class="icon" mode="widthFix" src="/static/image/user/checked.png"/>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="header">
          <view class="name">机器编号：101191</view>
        </view>
        <view class="body">
          <view class="item">运营商：<b>张小红</b></view>
          <view class="item">网络：：<image mode="widthFix" class="signal" src="/static/image/icon_network3.png"/> </view>
          <view class="item">到期时间：<b>2026-06-18</b></view>
          <view class="item">运营状态：<b>运营</b></view>
          <view class="check">
            <image class="icon" mode="widthFix" src="/static/image/user/check.png"/>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="header">
          <view class="name">机器编号：101191</view>
        </view>
        <view class="body">
          <view class="item">运营商：<b>张小红</b></view>
          <view class="item">网络：：<image mode="widthFix" class="signal" src="/static/image/icon_network3.png"/> </view>
          <view class="item">到期时间：<b>2026-06-18</b></view>
          <view class="item">运营状态：<b>运营</b></view>
          <view class="check">
            <image class="icon" mode="widthFix" src="/static/image/user/checked.png"/>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="header">
          <view class="name">机器编号：101191</view>
        </view>
        <view class="body">
          <view class="item">运营商：<b>张小红</b></view>
          <view class="item">网络：：<image mode="widthFix" class="signal" src="/static/image/icon_network3.png"/> </view>
          <view class="item">到期时间：<b>2026-06-18</b></view>
          <view class="item">运营状态：<b>运营</b></view>
          <view class="check">
            <image class="icon" mode="widthFix" src="/static/image/user/check.png"/>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="header">
          <view class="name">机器编号：101191</view>
        </view>
        <view class="body">
          <view class="item">运营商：<b>张小红</b></view>
          <view class="item">网络：：<image mode="widthFix" class="signal" src="/static/image/icon_network3.png"/> </view>
          <view class="item">到期时间：<b>2026-06-18</b></view>
          <view class="item">运营状态：<b>运营</b></view>
          <view class="check">
            <image class="icon" mode="widthFix" src="/static/image/user/checked.png"/>
          </view>
        </view>
      </view>
      <view class="card" >
        <view class="header">
          <view class="name">机器编号：101191</view>
        </view>
        <view class="body">
          <view class="item">运营商：<b>张小红</b></view>
          <view class="item">网络：：<image mode="widthFix" class="signal" src="/static/image/icon_network3.png"/> </view>
          <view class="item">到期时间：<b>2026-06-18</b></view>
          <view class="item">运营状态：<b>运营</b></view>
          <view class="check">
            <image class="icon" mode="widthFix" src="/static/image/user/check.png"/>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="header">
          <view class="name">机器编号：101191</view>
        </view>
        <view class="body">
          <view class="item">运营商：<b>张小红</b></view>
          <view class="item">网络：：<image mode="widthFix" class="signal" src="/static/image/icon_network3.png"/> </view>
          <view class="item">到期时间：<b>2026-06-18</b></view>
          <view class="item">运营状态：<b>运营</b></view>
          <view class="check">
            <image class="icon" mode="widthFix" src="/static/image/user/checked.png"/>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="header">
          <view class="name">机器编号：101191</view>
        </view>
        <view class="body">
          <view class="item">运营商：<b>张小红</b></view>
          <view class="item">网络：：<image mode="widthFix" class="signal" src="/static/image/icon_network3.png"/> </view>
          <view class="item">到期时间：<b>2026-06-18</b></view>
          <view class="item">运营状态：<b>运营</b></view>
          <view class="check">
            <image class="icon" mode="widthFix" src="/static/image/user/check.png"/>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="header">
          <view class="name">机器编号：101191</view>
        </view>
        <view class="body">
          <view class="item">运营商：<b>张小红</b></view>
          <view class="item">网络：：<image mode="widthFix" class="signal" src="/static/image/icon_network3.png"/> </view>
          <view class="item">到期时间：<b>2026-06-18</b></view>
          <view class="item">运营状态：<b>运营</b></view>
          <view class="check">
            <image class="icon" mode="widthFix" src="/static/image/user/checked.png"/>
          </view>
        </view>
        <view class="card">
          <view class="header">
            <view class="name">机器编号：101191</view>
          </view>
          <view class="body">
            <view class="item">运营商：<b>张小红</b></view>
            <view class="item">网络：：<image mode="widthFix" class="signal" src="/static/image/icon_network3.png"/> </view>
            <view class="item">到期时间：<b>2026-06-18</b></view>
            <view class="item">运营状态：<b>运营</b></view>
            <view class="check">
              <image class="icon" mode="widthFix" src="/static/image/user/check.png"/>
            </view>
          </view>
        </view>
      </view>
      <view class="card" >
        <view class="header">
          <view class="name">机器编号：101191</view>
        </view>
        <view class="body">
          <view class="item">运营商：<b>张小红</b></view>
          <view class="item">网络：：<image mode="widthFix" class="signal" src="/static/image/icon_network3.png"/> </view>
          <view class="item">到期时间：<b>2026-06-18</b></view>
          <view class="item">运营状态：<b>运营</b></view>
          <view class="check">
            <image class="icon" mode="widthFix" src="/static/image/user/check.png"/>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="header">
          <view class="name">机器编号：101191</view>
        </view>
        <view class="body">
          <view class="item">运营商：<b>张小红</b></view>
          <view class="item">网络：：<image mode="widthFix" class="signal" src="/static/image/icon_network3.png"/> </view>
          <view class="item">到期时间：<b>2026-06-18</b></view>
          <view class="item">运营状态：<b>运营</b></view>
          <view class="check">
            <image class="icon" mode="widthFix" src="/static/image/user/checked.png"/>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="action">
    <button class="btn">续费</button>
  </view>
</template>

<style scoped lang='scss'>
.card {
  background: #FFFFFF;
  box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
  border-radius: 8rpx 8rpx 0 0;
  margin: 24rpx 32rpx;
}
.header {
  box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
  padding: 22rpx 0;
  .name {
    font-size: 28rpx;
    font-weight: bold;
    position: relative;
    margin-left: 26rpx;
    &:before {
      content: '';
      width: 6rpx;
      height: 40rpx;
      position: absolute;
      left: -26rpx;
      background: #FF4638;
      border-radius: 3rpx 3rpx 3rpx 3rpx;
    }
  }
}
.body{
  padding: 24rpx 32rpx 34rpx;
  font-size: 24rpx;
  display: flex;
  flex-wrap: wrap;
  row-gap: 12rpx;
  box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
  color: #969699;
  position: relative;
  b {
    color: #303030;
  }
  .item {
    width: 50%;
  }
  .signal {
    width: 28rpx;
  }
  .check {
    position: absolute;
    right: 32rpx;
    top: 40rpx;
    .icon {
      width: 56rpx;
    }
  }
}
.outer {
  overflow-y: scroll;
  overflow-x: hidden;
}
.list {
  margin-bottom: 100rpx;
}
.action {
  background: #fff;
  padding: 10rpx 32rpx;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  .btn {
    background: rgba(255,70,56,0.1);
    width: 100%;
    border: none;
  }
}
</style>